<template>
	<view>
		<!-- 自定义头部导航 -->
		<!-- <page-meta>
			<navigation-bar :title="'原材料收货'" front-color="#000000" background-color="#FBFBFF" fixed />
		</page-meta> -->
		<view class="page">
			<!-- 			<view class="upload-scan">
				<label style="margin-right: 5px;">扫描送货单条码</label>
				<scan-bar style="display: inline-block" id="scanInput" ref="scanBarRef" placeholder="扫描送货单条码"
					@code-scanned="getScanResult"></scan-bar>
			</view> -->
			<view class="area-header">
				<u-text :text="'未收货送货单'+' (' + scannedList.length+')'"></u-text>
			</view>
			<view class="list-content">
				<!-- 列表 -->
				<u-list class="list" v-if="scannedList && scannedList.length > 0" :height="ListViewHeight">
					<u-list-item v-for="(item, index) in scannedList" :key="item.id"
						@click="receptionDetail(item, index)">
						<view class="card">
							<view class="right">
								<view class="title">发货日期: {{item?.deliveryTime?.split(' ')[0] || '待定' }}</view>
								<view class="body">送货单号:{{ item.deliveryCode }}</view>
								<view class="body">委外供应商: {{item?.supplierCode || '待定'}}</view>
							</view>
              <view class="left" v-if="item.receiveStatus==0">未收货 ></view>
              <view class="left" v-if="item.receiveStatus==1">部分收货 ></view>
						</view>
						<u-line></u-line>
					</u-list-item>
				</u-list>
				<!-- 空数据 -->
				<view v-else>
					<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { computed, ref } from 'vue';
	import ScanBar from '@/components/scan-bar/index.vue';
	import { onShow, onPullDownRefresh } from '@dcloudio/uni-app';
	import { http } from "../../../utils/http";
	import { PageResult } from '../../../types/type';
	import { useUserStore } from '../../../stores/useUserStore';

	// 重置表单信息 & 光标自动blur
	const scanBarRef = ref();
	const ListViewHeight = ref(0);

	const current = ref(1); // 当前页
	const totalPage = ref(0); //累计分页
	const total = ref(0); // 累计条数
	//已扫描集合
	const scannedList = ref([])
	onShow(async () => {
		ListViewHeight.value = uni.getSystemInfoSync().windowHeight;
		console.log('ListViewHeight.value', ListViewHeight.value);
		current.value = 0;
		scannedList.value = [];
		selectAll()
	})
	onPullDownRefresh(() => {
		current.value = 0;
		scannedList.value = [];
		selectAll('refresh')
	});
	// 选择跳转
	function receptionDetail(item : any, index : number) {
		uni.navigateTo({
			url: `/pages/use/wmsexteriorreturnreception/detail?result=${JSON.stringify(item)}`
		});
	}

	//查询未收货信息
	async function selectAll(type ?: string) {
		current.value += 1;
		const res : PageResult<any> = await http({
			method: 'POST',
			url: '/srm/srmmaterialdelivery/queryByPage',
			data: {
				current: current.value,
				size: 20,
				data: {
					exteriorDeliveryType: 1,
					shipmentStatus: 1,
          receiveStatusList: [0,1]
				}
			}
		});
		if (res.data.length > 0) {
			scannedList.value = res.data
			total.value = res.total;
			totalPage.value = res.page;
		} else {
			uni.$u.toast('未找到送货单！');
		}
		type === 'refresh' && uni.stopPullDownRefresh();
	}
</script>

<style lang="scss" scoped>
	.page {
		display: flex;
		flex-direction: column;
	}

	.upload-scan {
		padding: 10px 40rpx 10px 40rpx;
	}

	.area-header {
		color: #909193;
		padding: 10px 15px;
		margin-bottom: 0;
		font-size: 15px;
		background-color: #f3f4f6;
		display: flex;
	}

	.list-content {
		padding: $uni-page-padding;

		.list {
			.card {
				margin-top: 5px;
				margin-bottom: 10px;
				border-radius: 7px;
				display: flex;
				align-items: center;
				padding: 10px 0;
				transition: all 300ms ease;
				box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);

				.left {
					flex-basis: 90px;
					// padding-right: 10px;
					text-align: center;
					font-size: 17px;
					font-weight: 600;

					.enter {
						line-height: 20px;
						margin-bottom: 5px;
					}

					.number {
						font-size: 13px;
						line-height: 18px;
					}

					:deep(.u-icon--right) {
						flex-direction: row-reverse;
					}
				}

				.right {
					flex: 1;
					padding-left: 15px;

					.title {
						font-size: 15px;
						line-height: 20px;
						margin-bottom: 5px;
						font-weight: 700;
					}

					.body {
						font-size: 13px;
						line-height: 15px;
						margin-top: 8px;
					}
				}
			}
		}
	}

	.search {
		display: flex;
		flex: 1;

		.custom-style {
			// width: 120px;
			margin: 12px 5px 5px;
			height: 40px;
			border-radius: 8px;

			&:nth-child(1) {
				flex: 1
			}

			&:nth-child(2) {
				flex: 3
			}
		}
	}
</style>